<!DOCTYPE html>
<head>
	<link type="text/css" rel="stylesheet" href="/css/main.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script>
    $(function() {
        $('#graphTitle').change(function(){
            $('#fetchResult').text('');
            $('#graphTitleLabel').css('color', '');
        });
        $('#graphUrl').change(function(){
            $('#fetchResult').text('');
            $('#graphUrlLabel').css('color', '');
        });
        $('#graphValue').change(function(){
            $('#fetchResult').text('');
            $('#graphRegexpLabel').css('color', '');
        });
        $( "#testPollBtn" ).click(function( event ) {
            graphUrl = document.getElementById('graphUrl').value;
            graphValue = document.getElementById('graphValue').value;
            if (graphUrl == "" || graphUrl == null) {                
                $('#graphUrlLabel').css('color', 'red');
            } else {
                $.ajax({
                    type: "POST",
                    url: "/autoRegExp",
                    dataType: "json",
                    data: JSON.stringify({'graphUrl': graphUrl, 'graphValue': graphValue})
                }).success(function( resp ) {
                    var regExpListSelet = document.getElementById("graphRegexp");
                    for ( var e in resp) {
                        var option = document.createElement("option");
                        option.text = resp[e];
                        option.value = resp[e];
                        regExpListSelet.appendChild(option);
                    }
                }).fail(function(resp){
                    $('#fetchResult').text('(Fetch failed!)');
                });
            }
        });
    });
    </script>
</head>
{% autoescape true %}
<html>
  <body>
    <div style='float:left;width:100%;'>
      <div style="float:left;width:100%;">
        <div style="float:left;"><h2 style="margin-left: 40px;">Kooddle</h2></div>
        <div style="float:right;">Hi,{{currentUser.nickname()}} <a href="{{ url|safe }}"></a></div>
      </div>
    <div style="float:left;width:100%;"><hr></div>
    </div>
    
 <div style="float:left;display:inline-block;width:100%;">Current: <a href="/graph" >All Graphs</a> > New graph</div>
 <div style='float:left;width:100%;'><hr></div>
 <div style='float:left;margin-left:10px; margin-top:10px;'>
    <form action="/graph" method="post">
        <div align="right" style="display:inline-block; width:140px;" id='graphTitleLabel'>Graph Title(*) : </div><div style="display:inline-block"><input name="graphTitle" id="graphTitle"></div><br/>
        <div align="right" style="display:inline-block; width:140px;" id='graphUrlLabel'>Source URL(*) :</div><div style="display:inline-block"><input name="graphUrl" id="graphUrl" value="{{ graphUrl }}" size="128"></div><br/>
        <div align="right" style="display:inline-block; width:140px;">Watched value :</div><div style="display:inline-block"><input name="graphValue" id="graphValue"  value="{{ graphValue }}"size="80"></div>
        <br/>        
        <div align="right" style="display:inline-block; width:140px;">RegExp options :</div>
        <div style="display:inline-block"><select style="display:inline-block" name="graphRegexp" id="graphRegexp"></select></div><br/>
        <div align="right" style="display:inline-block; width:140px;">Frequency :</div><div style="display:inline-block"><select name="graphFrequency" id = "graphFrequency">
            <option value="hourly">hourly</option>
            <option value="daily" selected="selected">daily</option>
            <option value="monthly">monthly</option>
        </select></div><br/>
        <div align="right" style="display:inline-block"><button id='testPollBtn' type='button'>Generate regexp</button> <input type="submit" value="Create map"><div>
    </form>
    
  </div>

  </body>
</html>
{% endautoescape %}